// 航班过滤条件

<template>
  <div class="flights-filter">
    <el-row
      type="flex"
      class="filters-top"
      justify="space-between"
      align="middle"
    >
      <el-col :span="8"
        >单程： {{ fData.info.departCity }} - {{ fData.info.destCity }} /
        {{ fData.info.departDate }}
      </el-col>
      <!-- label展示给用户的，value是程序员自己用 -->
      <el-col :span="4">
        <el-select
          v-model="airport"
          placeholder="起飞机场"
          size="mini"
          @change="linkageFilter"
        >
          <el-option
            v-for="(item, index) in fData.options.airport"
            :key="index"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select
          v-model="flightTimes"
          placeholder="起飞时间"
          size="mini"
          @change="linkageFilter"
        >
          <el-option
            v-for="(item, index) in fData.options.flightTimes"
            :key="index"
            :label="`${item.from}:00 - ${item.to}:00`"
            :value="`${item.from},${item.to}`"
          >
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select
          v-model="company"
          placeholder="航空公司"
          size="mini"
          @change="linkageFilter"
        >
          <el-option
            v-for="(item, index) in fData.options.company"
            :key="index"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select
          v-model="airSize"
          placeholder="机型"
          size="mini"
          @change="linkageFilter"
        >
          <el-option
            v-for="(item, index) in airplaneSizes"
            :key="index"
            :label="item.name"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-col>
    </el-row>

    <div class="filter-cancel">
      筛选：<el-button
        class="repeal"
        type="primary"
        size="middle"
        round
        plain
        @click="handlerepeal"
        >撤销</el-button
      >
    </div>
  </div>
</template>

<script>
export default {
  // 通过props从航班父组件拿到渲染数据
  props: {
    fData: {
      required: true,
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      airport: "", // 机场
      flightTimes: "", // 出发时间
      company: "", // 航空公司
      airSize: "", // 机型大小,
      // 创建数据数组
      airplaneSizes: [
        { name: "大", value: "L" },
        { name: "中", value: "M" },
        { name: "小", value: "S" },
      ],
    };
  },
  mounted() {
    console.log(this.fData);
  },
  methods: {
    //层叠条件， 联动过滤filter航班数据，
    linkageFilter() {
      console.log(this.airport, this.flightTimes, this.company, this.airSize);
      // 以后对数据进行操作的时候，需要考虑是否需要保留一个副本，如果数据后期还有重复使用的可能，那么最好将数据复制一份进行操作
      let newList = [...this.fData.flights];
      // 机场
      if (this.airport) {
        newList = newList.filter((v) => {
          return v.org_airport_name == this.airport;
        });
      }
      // 起飞时间
      if (this.flightTimes) {
        let [from, to] = this.flightTimes.split(",");
        newList = newList.filter((v) => {
          // 判断小时数是否在小时范围内
          let start = v.dep_time.split(":")[0];
          return start >= from && start < to;
        });
      }
      // 航空公司
      if (this.company) {
        newList = newList.filter((v) => {
          return v.airline_name == this.company;
        });
      }
      // 机型
      if (this.airSize) {
        newList = newList.filter((v) => {
          return v.plane_size == this.airSize;
        });
      }
      // 子传父
      this.$emit("filterData", newList);
    },
    handlerepeal() {
      this.airport = ""; // 机场
      this.flightTimes = ""; // 出发时间
      this.company = ""; // 航空公司
      this.airSize = ""; // 机型大小,
      this.$emit("filterData", this.fData.flights);
    },
  },
};
</script>

<style lang="less" scoped>
.flights-filter {
  color: #333;
  .el-select {
    margin-left: 10px;
  }
  .filter-cancel {
    margin-top: 10px;
    .repeal {
      padding: 3px 7px;
    }
  }
}
</style>